<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram: Parallel Plates</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const plateHeight = 250;
    const plateWidth = 12;
    const yTop = 100;
    const yBottom = yTop + plateHeight;

    const xA = 250;
    const dAC_px = 70;  // Scaled distance for 2 mm
    const dAB_px = 140; // Scaled distance for 4 mm
    const xC = xA - dAC_px;
    const xB = xA + dAB_px;

    // --- Drawing Functions ---

    // Function to draw a plate
    function drawPlate(x, y, width, height) {
        ctx.fillStyle = 'rgb(220, 220, 220)';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillRect(x - width / 2, y, width, height);
        ctx.strokeRect(x - width / 2, y, width, height);
    }

    // Function to draw a dimension line
    function drawDimension(x1, x2, y, text) {
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;

        // Dashed lines from plates up
        ctx.beginPath();
        ctx.setLineDash([4, 4]);
        ctx.moveTo(x1, yTop);
        ctx.lineTo(x1, y);
        ctx.moveTo(x2, yTop);
        ctx.lineTo(x2, y);
        ctx.stroke();
        ctx.setLineDash([]);

        // Horizontal line with ticks
        ctx.beginPath();
        ctx.moveTo(x1, y);
        ctx.lineTo(x2, y);
        ctx.moveTo(x1, y - 5);
        ctx.lineTo(x1, y + 5);
        ctx.moveTo(x2, y - 5);
        ctx.lineTo(x2, y + 5);
        ctx.stroke();
        
        // Text
        ctx.fillStyle = 'black';
        ctx.font = '18px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(text, (x1 + x2) / 2, y - 8);
    }

    // Function to draw a ground symbol
    function drawGroundSymbol(x, y) {
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        const line1_w = 24;
        const line2_w = 16;
        const line3_w = 8;
        const spacing = 6;
        ctx.beginPath();
        ctx.moveTo(x - line1_w / 2, y);
        ctx.lineTo(x + line1_w / 2, y);
        ctx.moveTo(x - line2_w / 2, y + spacing);
        ctx.lineTo(x + line2_w / 2, y + spacing);
        ctx.moveTo(x - line3_w / 2, y + 2 * spacing);
        ctx.lineTo(x + line3_w / 2, y + 2 * spacing);
        ctx.stroke();
    }
    
    // Function to draw grounding wire
    function drawGroundConnection(plateX, plateSide, yWireStart) {
        const wireStartX = plateX + (plateSide === 'left' ? -plateWidth / 2 : plateWidth / 2);
        const wireCornerX = wireStartX + (plateSide === 'left' ? -40 : 40);
        const wireCornerY = yWireStart + 30;

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(wireStartX, yWireStart);
        ctx.lineTo(wireCornerX, yWireStart);
        ctx.lineTo(wireCornerX, wireCornerY);
        ctx.stroke();
        
        drawGroundSymbol(wireCornerX, wireCornerY);
    }

    // --- Main Drawing Logic ---

    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw plates
    drawPlate(xC, yTop, plateWidth, plateHeight);
    drawPlate(xA, yTop, plateWidth, plateHeight);
    drawPlate(xB, yTop, plateWidth, plateHeight);

    // Draw dimension lines
    const yDimLine = 50;
    drawDimension(xC, xA, yDimLine, '2 mm');
    drawDimension(xA, xB, yDimLine, '4 mm');
    
    // Draw plate labels
    const yLabel = yTop + 35;
    ctx.fillStyle = 'black';
    ctx.font = 'bold 24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('C', xC - 35, yLabel);
    ctx.fillText('A', xA - 35, yLabel);
    ctx.fillText('B', xB + 35, yLabel);

    // Draw ground connections
    const yWireStart = yBottom - 50;
    drawGroundConnection(xC, 'left', yWireStart);
    drawGroundConnection(xB, 'right', yWireStart);
    
    // Draw bottom caption
    ctx.fillStyle = 'black';
    ctx.font = '22px "KaiTi", "SimSun", sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('习题 7-45 图', canvas.width / 2, canvas.height - 15);

</script>
</body>
</html>